import React, { useState } from 'react';
import { Space, Card, Typography } from 'antd';
import { Transfer } from '../index';
import type { TransferProps } from 'antd';

const { Title } = Typography;

interface RecordType {
  key: string;
  title: string;
  description: string;
}

// 创建模拟数据
const createMockData = (count: number = 10): RecordType[] =>
  Array.from({ length: count }).map<RecordType>((_, i) => ({
    key: i.toString(),
    title: `选项${i + 1}`,
    description: `描述信息${i + 1}`,
  }));

const App: React.FC = () => {
  // 1. 基础双向穿梭框（1/8栏）
  const mockData1 = createMockData(10);
  const [targetKeys1, setTargetKeys1] = useState<string[]>(
    mockData1.filter((item) => Number(item.key) % 3 === 0).map((item) => item.key),
  );
  const [selectedKeys1, setSelectedKeys1] = useState<string[]>([]);

  // 2. 单向穿梭框（8栏）
  const mockData2 = createMockData(10);
  const [targetKeys2, setTargetKeys2] = useState<string[]>(
    mockData2.filter((item) => Number(item.key) % 3 === 1).map((item) => item.key),
  );
  const [selectedKeys2, setSelectedKeys2] = useState<string[]>([]);

  // 3. 带搜索框的穿梭框
  const mockData3 = createMockData(10);
  const [targetKeys3, setTargetKeys3] = useState<string[]>(
    mockData3.filter((item) => Number(item.key) % 3 === 2).map((item) => item.key),
  );
  const [selectedKeys3, setSelectedKeys3] = useState<string[]>([]);

  // 4. 禁用状态的穿梭框
  const mockData4 = createMockData(10);
  const targetKeys4 = mockData4.filter((item) => Number(item.key) % 2 === 0).map((item) => item.key);

  const handleChange1: TransferProps['onChange'] = (nextTargetKeys) => {
    setTargetKeys1(nextTargetKeys as string[]);
  };

  const handleSelectChange1: TransferProps['onSelectChange'] = (
    sourceSelectedKeys,
    targetSelectedKeys,
  ) => {
    setSelectedKeys1([...sourceSelectedKeys, ...targetSelectedKeys] as string[]);
  };

  const handleChange2: TransferProps['onChange'] = (nextTargetKeys) => {
    setTargetKeys2(nextTargetKeys as string[]);
  };

  const handleSelectChange2: TransferProps['onSelectChange'] = (
    sourceSelectedKeys,
    targetSelectedKeys,
  ) => {
    setSelectedKeys2([...sourceSelectedKeys, ...targetSelectedKeys] as string[]);
  };

  const handleChange3: TransferProps['onChange'] = (nextTargetKeys) => {
    setTargetKeys3(nextTargetKeys as string[]);
  };

  const handleSelectChange3: TransferProps['onSelectChange'] = (
    sourceSelectedKeys,
    targetSelectedKeys,
  ) => {
    setSelectedKeys3([...sourceSelectedKeys, ...targetSelectedKeys] as string[]);
  };

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* 1. 基础双向穿梭框 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          1/8 栏 - 基础双向穿梭框
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          支持左右双向移动，可以选择多个选项
        </div>
        <Transfer
          dataSource={mockData1}
          titles={['1/8栏', '之外栏']}
          targetKeys={targetKeys1}
          selectedKeys={selectedKeys1}
          onChange={handleChange1}
          onSelectChange={handleSelectChange1}
          render={(item) => item.title}
          listStyle={{
            width: 250,
            height: 300,
          }}
        />
      </Card>

      {/* 2. 单向穿梭框 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          8栏 - 单向穿梭框
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          仅支持从左向右单向移动
        </div>
        <Transfer
          dataSource={mockData2}
          titles={['8栏', '日常外栏']}
          targetKeys={targetKeys2}
          selectedKeys={selectedKeys2}
          onChange={handleChange2}
          onSelectChange={handleSelectChange2}
          render={(item) => item.title}
          oneWay
          listStyle={{
            width: 250,
            height: 300,
          }}
        />
      </Card>

      {/* 3. 带搜索框的穿梭框 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          带搜索框
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          支持搜索功能，快速查找选项
        </div>
        <Transfer
          dataSource={mockData3}
          titles={['检索', '检查']}
          targetKeys={targetKeys3}
          selectedKeys={selectedKeys3}
          onChange={handleChange3}
          onSelectChange={handleSelectChange3}
          render={(item) => item.title}
          showSearch
          filterOption={(inputValue, item) =>
            item.title.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
          }
          listStyle={{
            width: 250,
            height: 300,
          }}
        />
      </Card>

      {/* 4. 禁用状态 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          禁用状态
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          禁用状态下无法进行任何操作
        </div>
        <Transfer
          dataSource={mockData4}
          titles={['标题', '标题2']}
          targetKeys={targetKeys4}
          render={(item) => item.title}
          disabled
          listStyle={{
            width: 250,
            height: 300,
          }}
        />
      </Card>
    </Space>
  );
};

export default App;

